<template>
  <div class="app-container">
    <canvas id="cv7"/>
  </div>
</template>

<script>

export default {

  data() {
    return {

    }
  },
  mounted() {
    this.canvansInit()
  },
  methods: {
    canvansInit() {
      // 鼠标跟随小球
      this.getCircularMouse()
    },
    getCircularMouse() {
      const cv7 = document.getElementById('cv7')
      const ctx = cv7.getContext('2d')
      // 画布属性
      const w = document.documentElement.clientWidth - 6

      const h = document.documentElement.clientHeight - 6

      cv7.width = w
      cv7.height = h
      const _this = this
      function Ball(x, y) {
        const ball_this = this
        // 坐标
        this.x = x
        this.y = y
        // 半径
        this.r = 60

        this.color = `#` + parseInt(Math.random() * 0xffffff).toString(16)

        this.show = function() {
          // 半径逐渐变小
          ball_this.r--
          _this.getCircularFill(ctx, ball_this.x, ball_this.y, ball_this.r, ball_this.color)
        }
      }

      const ballArr = []
      window.onmousemove = function(e) {
        // console.log(e.x, e.y)
        var ball = new Ball(e.x, e.y)
        ballArr.push(ball)
        ball.show()
      }

      setInterval(() => {
        ctx.clearRect(0, 0, w, h)
        for (let i = 0; i < ballArr.length; i++) {
          const ball = ballArr[i]
          if (ball.r <= 0) {
            ballArr.splice(i, 1)
          } else {
            ball.show()
          }
        }
      }, 30)
    },

    // 返回随机数
    getRandom(num) {
      return Math.random() * num
    },
    getCircularFill(ctx, x, y, r, fillColor) {
      ctx.beginPath()
      ctx.fillStyle = fillColor || '#94e5ff'
      ctx.arc(x, y, r, 0, Math.PI * 2)
      ctx.fill()
    }
  }
}

</script>

<style scoped>
  .canvans1{
    margin-right: 20px;
    margin-bottom: 50px;
  }
.icon_num{
  width: 50px;
  line-height: 50px;
  background-color: #bbffff;
  text-align: center;
  color: black;
  border-radius: 80% 90% 100% 20%;
  margin-left: 20px;

}
  .wrapper{
    position: relative;
    padding: 20px 30px;
    border: 1px solid red;
    border-radius: 10px;
    text-align: center;
    background-color: #94e5ff;
    margin-left: 20px;

  }
  .triangle{
    position: absolute;
    top:-30px;
    left: 50%;
    margin-left: -15px;
    border-width: 15px;
    border-color: transparent transparent red transparent;
    border-style: solid;
  }
  .triangle div{
    position: absolute;
    top:-13px;
    left:-14px;
    border-width: 14px;
    border-style: solid;
    border-color: transparent transparent #bbffff transparent;
  }
  .cssicon div{
    float: left;

  }
  .icon_triangle{
    width: 0;
    border-width: 20px;
    border-style: solid;
    border-color: #94e5ff transparent transparent  transparent;
  }
  .icon_triangle1{
    /*width: 30px;*/
    border-width: 20px;
    border-style: solid;
    border-color: transparent transparent  #94e5ff transparent;
  }
  .icon_triangle2{
   /* width: 30px;*/
    border-width: 20px;
    border-style: solid;
    border-color: transparent #94e5ff transparent   transparent;
  }
  .icon_triangle3{
    border-width: 20px;
    border-style: solid;
    border-color: transparent  transparent   transparent #94e5ff;
    /*transform: rotate(45deg);*/
  }
  .icon+.icon{
    margin-left: 20px;
  }
  .cssicon{
    display: inline-block;
  }

  .app-container {
    background-color: #171c3c;
  }

  .chart-title {
    width: 100%;
    text-align: center;
    height: 80px;
    line-height: 80px;
    font-size: 24px;
    color: #fff;
    position: relative;
    margin-top: 20px;
    margin-bottom: 10px;
  }

</style>

